<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .banner{
        width: 80%;
        height: 500px;
        background: tomato;
        margin: 0 auto;
    }
    .content{
        width: 80%;
        height: 800px;
        background: royalblue;
        margin: 100px auto;
    }
    .footer{
        width: 80%;
        height: 200px;
        background: #999999;
        margin: 100px auto 0px;
    }
    .item{
        width: 100px;
        height: 200px;
        background: aquamarine;
        position: absolute;
        right: 0;
        top: 200px;
        display: block;
    }
</style>
<body>
<div class="banner">
    导航
</div>
<div class="content">
    内容
</div>
<div class="item">
    <span class="goBack" style="display: none">置顶</span>
</div>
<div class="footer">
    底部
</div>
<script>
    var item = document.querySelector('.item');
    var banner = document.querySelector('.banner');
    var bannerTop = banner.offsetTop;
    var itemTop = item.offsetTop - bannerTop;
    var content = document.querySelector('.content');
    var goBack = document.querySelector('.goBack');
    var contentTop = content.offsetTop;
    document.addEventListener('scroll',function () {
        if (window.pageYOffset >= bannerTop) {
            item.style.position = 'fixed';
            item.style.top = itemTop + 'px';
        }else {
            item.style.position = 'absolute';
            item.style.top = '200px';
        }
        if (window.pageYOffset >= contentTop) {
            goBack.style.display = 'block';
        }else {
            goBack.style.display = 'none';
        }
    })
</script>
</body>
</html>